<!-- 信息字段修改组件 -->

<script setup lang="ts">
// import Image from '@/components/Image.vue'

// 信息字段类型
type FieldType = 'text' | 'textarea' | 'number' | 'boolean' | 'date' | 'image'

// 信息字段类型枚举
enum FieldTypeEnum {
  TEXT = 'text',
  TEXTAREA = 'textarea',
  NUMBER = 'number',
  BOOLEAN = 'boolean',
  DATE = 'date',
  IMAGE = 'image',
}

// const props =
defineProps<{
  // 信息字段标签
  label: string
  // 信息字段类型
  fieldType: FieldType
  // 信息字段内容
  content: string
  // 信息字段修改的提示
  placeholder?: string
}>()
</script>

<template>
  <div class="mt-6 text-base">
    <!-- 信息字段标签 -->
    <div class="flex-start-center gap-1 text-xl md:text-lg font-bold transition-500-ease">
      <!-- 图标插槽 -->
      <slot name="icon"></slot>
      <span>{{ label }}</span>
    </div>
    <!-- 信息字段内容 -->
    <div class="box-border px-6 py-2">
      <!-- 文本类型信息字段 -->
      <div v-if="fieldType === FieldTypeEnum.TEXT">
        <div>{{ content }}</div>
        <n-input class="mt-2" type="text" :placeholder="placeholder" clearable />
      </div>
      <!-- 文本域类型信息字段 -->
      <div v-else-if="fieldType === FieldTypeEnum.TEXTAREA">
        <div>{{ content }}</div>
        <n-input
          class="mt-2"
          type="textarea"
          :placeholder="placeholder"
          :autosize="{ minRows: 3 }"
          clearable
        />
      </div>
      <!-- 图片类型信息字段 -->
      <!--<div v-else-if="fieldType === FieldTypeEnum.IMAGE">-->
      <!--  <div class="w-24 h-24 md:w-16 md:h-16 rounded-full overflow-hidden">-->
      <!--    <Image img-src="/images/avatars/avatar-01.jpg" />-->
      <!--  </div>-->
      <!--</div>-->
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
